
// 获取联系人列表长度即联系人个数
let count = document.querySelector('#list').querySelectorAll('tr').length
//改变HTML显示的人数
let ren = document.getElementById('count')
ren.innerHTML = '共' + count + '位联系人'


//删除功能
//获取所有删除按钮 删除按钮是<td class="delbt"><button>删除</button></td>
let alldelbtn = document.querySelectorAll('.delbt')
// console.log(alldelbtn)
//遍历每一个删除按钮.delbt,使所点击的删除按钮对应所选行
for (let delKey of alldelbtn) {
    //此时点击的删除按钮名为delKey
    delKey.onclick = function () {
        // 让所有的点击按钮此时只对应当前点击的删除按钮
        let alldelbtn = this // 即可alldelbtn = 此时点击的delKey
        // 找父类元素进行删除当前所选行
        //alldelbtn = delKey对应<td class="delbt"></td> 该父类是tr 要向上寻找一次
        let tr = alldelbtn.parentNode
        //删前做决定
        //获取所选删除行的姓名，以确认信息是否删除
        // 姓名是tr的内子元素的第一个子元素children[0]
        let delName = tr.children[0].innerHTML
        if (confirm(`你确定删除"${delName}"联系人吗`)) {
            //找tbody 删除 当前tr(行)
            tr.parentNode.removeChild(tr)
            //联系人总数减一
            count--
            // console.log(count)
        }
        //显示减完的联系人人数
        document.getElementById('count').innerHTML = '共' + count + '位联系人'
        //当联系人列表被删完，即联系人列表长度为0时,显示无添加联系人
    }

}

//修改功能
//拿到所有修改按钮
let allrevbtn = document.getElementsByClassName('revbt')
// console.log(allrevbtn)
for (let revKey of allrevbtn) {
    revKey.onclick = function () {
        // console.log('点击修改')
        let allrevbtn = this
        // 让当前所修改项的信息填入修改栏中
        let mz = this.parentNode.children[0].innerHTML
        let dh = this.parentNode.children[1].innerHTML
        let yx = this.parentNode.children[2].innerHTML
        // console.log(mz + dh + yx)
        document.getElementById('rev_name').value = mz
        document.getElementById('rev_phone').value = dh
        document.getElementById('rev_email').value = yx
        // 点击修改按钮后，修改修改栏的CSS属性让修改栏出现
        document.getElementById('revbox').style.visibility = "visible"
        document.getElementById('revbox').style.display = "block"
        // 拿到保存按钮
        let baocun = document.getElementById('baocun')
        baocun.onclick = function () {
            let reName = document.getElementById('rev_name').value
            let rePhone = document.getElementById('rev_phone').value
            let reEmail = document.getElementById('rev_email').value
            if (reName.length == 0) {
                alert('提示:所修改的信息名字为空!')
            } else if (rePhone.length == 0 && reEmail.length == 0) {
                alert('提示:所修改的手机或邮箱不能为空!')
            } else if (reName == revKey.parentNode.children[0].innerHTML && rePhone == revKey.parentNode.children[1].innerHTML && reEmail == revKey.parentNode.children[2].innerHTML) {
                alert('提示:所修改的信息与当前信息相同!')
            } else {
                //revKey = 当前点击的<td class="revbt"></td> 该父类则为联系人列表的tr 
                revKey.parentNode.children[0].innerHTML = reName
                revKey.parentNode.children[1].innerHTML = rePhone
                revKey.parentNode.children[2].innerHTML = reEmail
                alert("修改成功")
                // 点击保存按钮后，修改修改栏的CSS属性让修改栏隐藏
                document.getElementById('revbox').style.visibility = "hidden"
                document.getElementById('revbox').style.display = "none"
                
            }
        }
    }
}


// 添加功能  
// 拿到添加按钮 id = addbtn
let addbtn = document.getElementById('addbtn')
// 为添加按钮注册点击事件
addbtn.onclick = function () {
    // 拿到用户输入的表单内容
    let name = document.getElementById('form_name').value
    let phone = document.getElementById('form_phone').value
    let email = document.getElementById('form_email').value
    if (name.length == 0) {
        alert('添加的联系人姓名不能为空!')
    } else if (phone.length == 0 && email == 0) {
        alert('添加的联系人手机或邮箱必须填写其一!')
    } else {
        // console.log('判断完错误情况后，进行添加操作')
        // 新建一个用户输入的表单内容的行tr
        let newtr = document.createElement('tr')
        newtr.innerHTML =
            `<td>${name}</td>
            <td>${phone}</td>
            <td>${email}</td>
            <td class="delbt"><button>删除</button></td>
            <td class="revbt"><button>修改</button></td>`

        // console.log(newtr)


        //为新添加的删除按钮做相应功能事件
        let newdel = newtr.querySelector('.delbt')
        // console.log(newdel)
        newdel.onclick = function () {
            let alldelbtn = this // 此时所有删除按钮 = 当前的删除按钮,即 = newdel
            // 找父类元素删除
            let tr = alldelbtn.parentNode
            // 删除前做判断
            let delName = tr.children[0].innerHTML
            if (confirm(`你确定删除"${delName}"联系人吗`)) {
                //找tr父类tbody进行删除tr
                tr.parentNode.removeChild(tr)
                //联系人列表总数减一
                count--
            }
            //显示当前联系人列表总人数
            document.getElementById('count').innerHTML = '共' + count + '位联系人'
        }


        //为新添加的修改按钮做相应功能事件
        let newrev = newtr.querySelector('.revbt')
        newrev.onclick = function () {
            // console.log('点击修改')
            let allrevbtn = this
            // 让当前所修改项的信息填入修改栏中
            let mz = this.parentNode.children[0].innerHTML
            let dh = this.parentNode.children[1].innerHTML
            let yx = this.parentNode.children[2].innerHTML
            // console.log(mz + dh + yx)
            document.getElementById('rev_name').value = mz
            document.getElementById('rev_phone').value = dh
            document.getElementById('rev_email').value = yx
            // 点击修改按钮后，修改修改栏的CSS属性让修改栏出现
            document.getElementById('revbox').style.visibility = "visible"
            document.getElementById('revbox').style.display = "block"
            // 拿到保存按钮
            let baocun = document.getElementById('baocun')
            baocun.onclick = function () {
                let reName = document.getElementById('rev_name').value
                let rePhone = document.getElementById('rev_phone').value
                let reEmail = document.getElementById('rev_email').value
                if (reName.length == 0) {
                    alert('提示:所修改的信息姓名不能为空!')
                } else if (rePhone.length == 0 && reEmail.length == 0) {
                    alert('提示:所修改的手机或邮箱不能为空!')
                } else if (reName == newrev.parentNode.children[0].innerHTML && rePhone == newrev.parentNode.children[1].innerHTML && reEmail == newrev.parentNode.children[2].innerHTML) {
                    alert('提示:所修改的信息与当前信息相同!')
                } else {
                    //revKey = 当前点击的<td class="revbt"></td> 该父类则为联系人列表的tr 
                    newrev.parentNode.children[0].innerHTML = reName
                    newrev.parentNode.children[1].innerHTML = rePhone
                    newrev.parentNode.children[2].innerHTML = reEmail
                    alert("修改成功")
                    // 点击保存按钮后，修改修改栏的CSS属性让修改栏隐藏
                    document.getElementById('revbox').style.visibility = "hidden"
                    document.getElementById('revbox').style.display = "none"
                }
            }
        }
        // 获取联系人列表tbody
        let tbody = document.getElementById('list')
        // 把新增的行添加到联系人列表上
        tbody.appendChild(newtr)
        // 联系人人数增加
        count++
        // 显示联系人列表总人数
        document.getElementById('count').innerHTML = '共' + count + '位联系人'
    }
}


//搜索按钮
//获取搜索按钮
var flag = true
let findbt = document.getElementById('findbt')
findbt.onclick = function () {
    let findName = document.getElementById('find_name').value
    var tb = document.getElementById('list');    // table 的 id
    var rows = tb.rows;                           // 获取表格所有行
    for (var i = 0; i < rows.length; i++) {
        if (rows[i].children[0].innerHTML == findName) {
            alert('所搜索联系人信息为：' + '姓名:'+rows[i].children[0].innerHTML + '  电话:' + rows[i].children[1].innerHTML + '  邮箱:' + rows[i].children[2].innerHTML)
        }
    }
}



















